<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
		<title>{$title}</title>
		<!-- <link rel="stylesheet" type="text/css" href="/static/css/NewH5.css"/> -->
    	<link rel="stylesheet" type="text/css" href="/static/css/iconfont.css"/>
		<script src="/static/js/base.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			   html,body{
			   	width:100%;
			   	height:100%;
			   	margin:0;
			   }
			   html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img,input,figure,figcaption{margin:0;padding:0}
				body{font-family: '微软雅黑';}
				ul,ol,li{list-style:none;}
				b,strong{font-weight:normal;}
				i,em{font-style:normal;}
				a,u{text-decoration: none;}
				h1,h2,h3,h4,h5,h6{font-size:16px;font-weight:normal;}
				input{outline: 0}
				img{border:0;display:block;}
				#top{
					width:100%;
					height:35%;				
					background-image:url(/static/img/123.png);
					background-repeat:no-repeat;
					background-size:100% 100%;
					padding-top:10%;
					position:relative;
				}
				.tx{
					width:21%;
					height:35%;
					border-radius:100%;
					position: relative;
					left:0;
					right:0;
					margin:0 auto;
				}
				#bottom{
					width:100%;
					flex:1;
					background:pink;
					background-image:url(/static/img/bgbg.png);
					background-repeat:no-repeat;
					background-size:100% 100%;
					display:flex;
					flex-direction:column;
					align-items:center;
					padding-top:10%;
				}
				.ip1{
			       width:77%;
			       height:45px;
			       background:#fff;
			       border-radius:10px;
			       margin-bottom:8%;
			       display:flex;
			       align-items:center;
			       padding-left:3%;
				}
				.ip2{
			       width:77%;
			       height:45px;
			       background:#fff;
			       border-radius:10px;
			       margin-bottom:8%;
			       display:flex;
			       align-items:center;
			       padding-left:3%;
			       
				}
				.ip3{
			       width:77%;
			       height:45px;
			       background:#fff;
			       border-radius:10px;
			       margin-bottom:8%;
			       display:flex;
			       align-items:center;
			       padding-left:3%;
				}
				#ipt1{
					flex:1;
					height:24px;
					padding:0 5%;
					border:none;
					border-left:1px solid #808080;
				}
				#ipt2{
					flex:1;
					height:24px;
					padding:0 5%;
					border:none;
					border-left:1px solid #808080;
				}
				#ipt3{
					width:46%;
					height:24px;
					padding:0 5%;
					border:none;
					border-left:1px solid #808080;
				}
				.popup{
					position:fixed;
					top:0;
					left:0;
					width:100%;
					height:100%;
					background:rgba(0,0,0,.5);
					display:none;
				}
				.popup-contnet{
					width:100%;
					height:1.1rem;
					position:absolute;
					left:0;
					background:rgba(255,255,255,.9);
					padding:0 0.1rem;
					transition:0.5s;
					bottom:0;
				}
				.sys-cx div{
					width:50%;
					text-align:center;
					height:1.1rem;
					line-height:0.8rem;
					float:left;
				}
				.sys-cx .an i{
					color:#4CB034;
					font-size:0.65rem;
				}
				.sys-cx .ios i{
					color:#000;
					font-size:0.65rem;
				}
	      		.on{display:block;}
		</style>
	</head>
	<body style="display:flex;flex-direction:column;">
			<div id="top">
				   <img class="tx" src="{$urlimg}{$logo}"/>
			</div>
			<div id="bottom">
				    <div class="ip1">
				    	 <img src="/static/img/sj.png" style="width:14px;height:21px;margin-right:10px;"/>
				    	 <input type="number" id="ipt1"  placeholder="请输入手机号码" oninput="if(value.length>4)value=value.slice(0,11)"/>
				    </div>
				    <div class="ip2">
				    	 <img src="/static/img/mm.png" style="width:16px;height:19px;margin-right:10px;"/>
				    	 <input type="password" id="ipt2"  placeholder="请设置密码"/>
				    </div>
				    <div class="ip3">
				    	<img src="/static/img/yzm.png" style="width:18px;height:20px;margin-right:10px;"/>
				    	<input type="number" id="ipt3" placeholder="请输入验证码" oninput="if(value.length>4)value=value.slice(0,4)"/>
				    	<button class="yzm" style="height:20px;border:none;cursor:pointer;background:#fff;border-left:1px solid #4ea2fe;color:#4ea2fe;" >获取验证码</button> 
				    </div>
				    <img class="ljhk" src="/static/img/56.png" style="width:85%;height:52px;"/>
			</div>

	       	<div class="popup">
	          <div class="popup-contnet">
	            <div class="sys-cx clearfix">
	              <div class="an fl">
	                <a href="{$android}" target="_blank">
	                  <i class="iconfont icon-anzhuo"></i>
	                </a>
	              </div>
	              <div class="ios fl">
	                <a href="{$ios}" target="_blank">
	                  <i class="iconfont icon-ios"></i>
	                </a>
	              </div>
	            </div>
	          </div>
	       	</div>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
	<script type="text/javascript">
		var ytel = GetQueryString("invite_code");
        var cus_id = GetQueryString("cus_id");
        var vcodeo=168354587545;
        function GetQueryString(name)
        {
           var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
           var r = window.location.search.substr(1).match(reg);
           if(r!=null)return  unescape(r[2]); return null;
        }
		$('.yzm').click(function(){
			if(!$('#ipt1').val()) return alert('手机号不能为空')
       	    if(!/^1[123456789]\d{9}$/.test($('#ipt1').val())) return alert('手机号格式不对');
       	    if(!$('#ipt2').val()) return alert('请设置密码')
       	    var phone = $("#ipt1").val();
       	    $.ajax({
                  type: 'POST',
                  url: '{:url("appsendSms")}',
                  data:{phone:phone,cus_id:cus_id},
                  success: function(response){
                    if(response.code==200){
                      vcodeo=response.data;
                    }else{
                      alert(response.msg);
                    }
                  },
                  error: function(err){

                  }
            })
       	    var djs = 60
            var time = setInterval(() => {
                 djs--;
                 $(".yzm").attr("disabled",true);
                 $('.yzm').text("已发送(" + djs + ")")
                  if(djs==0){
                  clearInterval(time)  
                 $(".yzm").attr("disabled",false);
                 $('.yzm').text("重新发送") 
                      }
            },1000);
		})
		$(".ljhk").click(function(){
			var phone = $("#ipt1").val();
			var password = $("#ipt2").val();
			var vcode = $("#ipt3").val();
			if(vcode==vcodeo){
				$.ajax({
				    type: 'POST',
				    url: '{:url("appregistering")}',
				    data: {phone:phone,password:password,vcode:vcode,ytel:ytel,cus_id:cus_id},
				    success: function(response){
				      if(response.code==501){
				        alert(response.msg)
				      }else if(response.code==502){
				        alert(response.msg)
				      }else if(response.code==503){
				        alert(response.msg)
				        $(".popup").fadeIn(300, function() {
				          $(this).addClass('on')
				        });
				      }else if(response.code==504){
				        alert(response.msg)
				        $(".popup").fadeIn(300, function() {
				          $(this).addClass('on')
				        });
				      }else if(response.code==200){
				        $(".popup").fadeIn(300, function() {
				          $(this).addClass('on')
				        });
				      }
				    },
				    error: function(err){
				    }
				})  
			}else{
				alert('验证码错误');
			}
		})
	</script>
</html>
